<%@ page language="java" contentType="text/html;charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%-- <script src="<c:url value='/js/jquery.min.js'/>"></script> --%>
<script src="<c:url value='/js/jquery.form.js'/>"></script>
<script type="text/javascript">
	function valid() {
		$("#div_name").removeClass("control-group error");
		$("#div_name").addClass("control-group");
		$("#div_number").removeClass("control-group error");
		$("#div_number").addClass("control-group");
        $("#div_category").removeClass("control-group error");
        $("#div_category").addClass("control-group");

		var name = $("[name='name']").val().trim();
		var number = $("[name='size']").val().trim();
		var entityZoneCategory = $("#entity-zone-category").val();
		
		if (name == "") {
			$("#div_name").removeClass("control-group");
			$("#div_name").addClass("control-group error");
			$("#help_name").html("名称不能为空");
			return false;
		}
		if (number == "") {
			$("#div_number").removeClass("control-group");
			$("#div_number").addClass("control-group error");
			$("#help_number").html("大小不能为空");
			return false;
		}
	    if (entityZoneCategory == "") {
	        $("#div_category").removeClass("control-group");
	        $("#div_category").addClass("control-group error");
	        $("#help_category").html("类别不能为空");
	        return false;
	    }
		return true;
	}
</script>

<div>
    <div class="">
            <ul class="breadcrumb">
                <li>
                    <h3 style="margin-top: auto">
                        <c:out value="${project.name}"></c:out>
                        <span class="divider">/</span>
                    </h3>
                </li>
                <li><h3>显控设计模式 <span class="divider">/</span></h3></li>
                <li class="active"><h3><a href="#">实体数据区</a> <span class="divider">/</span></h3></li>
            </ul>
    </div>
    <hr  />
    <!-- div class="tabbable">
        <div class="tabbable" style="margin-bottom: 18px;">
            <ul class="nav nav-tabs">
                <li class="active"><a href="" data-toggle="pill"><h3>实体数据区</h3></a></li>
                <li class=""><a href="" data-toggle="pill"><h3>总线通信</h3></a></li>
                <li class=""><a href="" data-toggle="pill"><h3>IO通信</h3></a></li>
                <li class=""><a href="" data-toggle="pill"><h3>信息显示</h3></a></li>
                <li class=""><a href="" data-toggle="pill"><h3>控制响应</h3></a></li>
            </ul>
            <div class="tab-content"
                style="padding-bottom: 9px; border-bottom: 1px solid #ddd;"-->
            <div>
                <div class="tab-pane active form-horizontal" id="tab1">
                    <div class="span9" align="right">
                        <c:choose>
                        <c:when test="${isEdit}" >
                             <a class="btn"
                            href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/BUS/edit"><i class="icon-arrow-right"></i> 下一步</a>
                        </c:when>
                        <c:otherwise>
                          <a class="btn"
                            href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/BUS/scan"><i class="icon-arrow-right"></i> 下一步</a>
                        </c:otherwise>
                        </c:choose>
                        <a class="btn"
                            href="/ManEnv/designPatternCategory/list"><i class=" icon-circle-arrow-left" ></i>&nbsp;返回</a>
                    </div>
                    
                    <div class="control-group span7">
                        <label class="control-label" for="">实体数据区类别</label>
                        <div class="controls">
                            <c:choose>
                            <c:when test="${isEdit}">
                                <div class="btn-group">
                                    <button class="btn" data-target="#add-entity-zone-category-panel" data-toggle="modal"data-backdrop="false">
                                        <i class="icon-plus"></i>&nbsp;增加</button>
                                </div>
                            </c:when>
                            </c:choose>                       
                            <div>
                                <p />
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>名称</th>
                                            <c:choose>
                                                <c:when test="${isEdit}">
                                                    <th>操作</th>
                                                </c:when>
                                            </c:choose>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach items="${entityZoneCategorys}" var="entityZoneCategory" varStatus="status">
                                            <tr>
                                                <td>${status.count}</td>
                                                <td>${entityZoneCategory.name}</td>
                                                <c:choose>
                                                <c:when test="${isEdit}">
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn" onclick="showEntityZoneCategoryDeletePanel('${entityZoneCategory.id}', this)"><i class="icon-trash"></i>&nbsp;删除</button>
                                                        <input type="hidden" value="${entityZoneCategory.id }" />
                                                    </div>
                                                </td>
                                                </c:when>
                                                </c:choose>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
             
                    <div class="control-group span7">
                        <label class="control-label" for="">已有实体数据区</label>
                        <div class="controls">
                            <div>
                                <p />
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>名称</th>
                                            <th>大小</th>
                                            <th>实体</th>
                                            <c:choose>
                                            <c:when test="${isEdit}">
                                            <th>操作</th>
                                            </c:when>
                                            </c:choose>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach items="${entityZones}" var="entityZone"
                                            varStatus="status">
                                            <tr>
                                                <td>${status.count}</td>
                                                 <td>${entityZone.name}</td>
                                                <td>${entityZone.size}</td>
                                                <td>${entityZone.entityUri}</td>
                                                <c:choose>
                                                <c:when test="${isEdit}">
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn" onclick="showDeletePanel('${entityZone.id}', this)">
                                                        <i class="icon-trash"></i> 删除</button>
                                                        <input type="hidden" value="${entityZone.id}" />
                                                    </div>
                                                </td>
                                                </c:when>
                                                </c:choose>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                <c:choose>
                    <c:when test="${isEdit}">
                    <div class="control-group span7" id="add_equipment">
                        <form class="form-horizontal"
                            action="/ManEnv/entityZone/designPatternCategory/${project.id}/add"
                            method="post" onsubmit="return valid()">
                            <input type="hidden" name="projectId" value="${project.id }"></input> 
                            <label
                                class="control-label" for="dataZone">添加实体数据区</label>
                            <br/></br>
                            <div class="controls" >
                                <div class="control-group" id="div_name">
                                    <label class="control-label" for="equipment">名称</label>
                                    <div class="controls">
                                       <input type="text" name="name" id="name"
                                            placeholder="请输入实体数据区名称"></input>
                                            <span class="help-block" id="help_name">请输入英文名称，例如flightPointsZone${errormsg}</span>
                                    </div>
                                </div>

								<div class="control-group" id="div_number">
									<label class="control-label" for="busType">大小</label>
									<div id="busType" class="controls">
										<input type="text" name="size" placeholder="1"></input>
										<span class="help-block" id="help_number">请输入数字${errormsg}</span>
									</div>
								</div>
								
							     <div class="control-group">
                                    <label class="control-label" for="read_bus_processing_method">映射实体</label>
                                    <div class="controls">
                                        <select name="entityUri">
                                            <c:forEach items="${domainEntitys }" var="domainEntity">
                                                <option value="${domainEntity.uri}">
                                                    <c:out value="${domainEntity.name}"></c:out>
                                                </option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label class="control-label" for="entity_zone_category">类别</label>
                                    <div class="controls">
                                        <select name="entityZoneCategoryId" id="entity-zone-category">
                                            <c:forEach items="${entityZoneCategorys }" var="entityZoneCategory">
                                                <option value="${entityZoneCategory.id}">
                                                    <c:out value="${entityZoneCategory.name}"></c:out>
                                                </option>
                                            </c:forEach>
                                        </select>
                                        <span class="help-block" id="help_category">请输入类别${errormsg}</span>
                                    </div>
                                </div>

								<div class="control-group">
                                    <div class="controls">
                                        <button type="submit" class="btn"><i class="icon-ok"></i> 确认</button>
                                        <button type="reset" class="btn"><i class="icon-remove"></i> 取消</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                   </c:when>
                  </c:choose> 
                </div>
                <!-- div class="tab-pane" id="tab2"></div>
                <div class="tab-pane" id="tab3"></div>
                <div class="tab-pane" id="tab4"></div>
                <div class="tab-pane" id="tab5"></div>
            </div>
        </div -->
        <!-- /tabbable -->
    </div>
</div>


<div class="modal hide fade" id="entity_zone_panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
        <h3>添加实体数据区</h3>
    </div>
    <div class="modal-body">
        <c:forEach items="${domainEntitys}" var="domainEntity">
            <div id="data_area_input" class="control-group">
                <label class="checkbox"> 
                    <input type="checkbox" value="${domainEntity.uri}" /> 
                    <c:out value="${domainEntity.name}"></c:out>
                </label>
            </div>
        </c:forEach>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class="btn" id="add_data_component" onclick="saveEntityZone()">保存</button>
    </div>
</div>

<div class="modal hide fade" id="dp_component_info_panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
        <h3>外部设备详细信息</h3>
    </div>
    <div class="modal-body">
        <table class="table table-hover" style="width: 80%">
            <thead>
                <tr>
                    <th style="width: 30%">属性</th>
                    <th style="width: 70%">详细信息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>设备名称</td>
                    <td><span id="equipment_info"></span></td>
                </tr>

                <tr>
                    <td>总线类型</td>
                    <td><span id="bus_type_info"></span></td>
                </tr>
                <tr>
                    <td>总线数据区</td>
                    <td><span id="bus_data_area_info"></span></td>
                </tr>
                <tr>
                    <td>映射的数据实体</td>
                    <td><span id="entity_data_areas_info"></span></td>
                </tr>
                <tr>
                    <td>外部设备号</td>
                    <td><span id="equipment_number_info"></span></td>
                </tr>
                <tr>
                    <td>总线读处理函数</td>
                    <td><span id="read_bus_processing_method_info"></span></td>
                </tr>
                <tr>
                    <td>执行频率</td>
                    <td><span id="read_frequency_info"></span></td>
                </tr>
                <tr>
                    <td>总线写处理函数</td>
                    <td><span id="write_bus_processing_method_info"></span></td>
                </tr>
                <tr>
                    <td>执行频率</td>
                    <td><span id="write_frequency_info"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class="btn" id="view_equipment_info">确定</button>
    </div>
</div>

<div class="modal hide fade" id="delete-entity-zone-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除实体数据区</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除实体数据区?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-entity-zone-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>


<div class="modal hide fade" id="delete-entity-zone-category-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除实体数据区类别</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除实体数据区类别?</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" id="delete-entity-zone-category-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>

<div class="modal hide fade" id="add-entity-zone-category-panel">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>添加实体数据区类别</h3>
    </div>
    <form action="/ManEnv/entityZoneCategory/designPatternCategory/${project.id}/add" 
        id="add-entity-zone-category-form" method="post" class="form-horizontal">
        <div class="modal-body">
            <div class="control-group">
                <label class="control-label" for="name">类别</label>
                <div class="controls">
                    <input type="text" name="name" placeholder="类别名称">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn "><i class="icon-ok"></i>&nbsp;确定</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;取消</button>
        </div>
    </form>
</div>


<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="<c:url value='/js/design_pattern_component.js'/>"></script>
<script src="<c:url value='/js/editEntityZone.js'/>"></script>

